<template>
  <div id="order-express-page" :style="{
    height:(this.getWinSize().height-this.getSafeArea().top+4)+'px'
  }" v-if="orderExpress.id>0">
    <div class="page-title" :style="{top:(this.getSafeArea().top)+'px'}">
      <div id="back-button" @click="$router.back()">
        <i href="javascript:void(0)" class="el-icon-arrow-left"></i>
      </div>
      <span>物流详情</span>
      <div class="more" :style="{top:(this.getSafeArea().top+4)+'px'}" @click="GetMore" v-text="'更多('+getMoreNums()+')'"></div>
    </div>

    <div class="top-box" style="position: relative;" :style="{top:(this.getSafeArea().top)+'px'}">
      <div>
        <div class="icon-box">
          <i class="el-icon-success" v-if="orderExpress.tagName==='已签收'"></i>
          <span v-if="orderExpress.tagName==='已签收'" v-text="orderExpress.tagName"></span>
        </div>
        <div>
          <el-tag size="small" type="success">
            {{ orderExpress.expressCompany }}
            {{ orderExpress.expressNumber }}
          </el-tag>
        </div>
<!--        <div class="sender">-->
<!--          <span>配送员: 赵立斐</span>-->
<!--          <i class="el-icon-phone"></i>-->
<!--        </div>-->
      </div>
    </div>

    <div class="item" style="position: relative;" :style="{top:(this.getSafeArea().top)+'px'}">
      <el-timeline style="width: 90%; margin: 5px auto;">
        <el-timeline-item
          v-for="(activity, index) in orderExpress.content"
          :key="index"
          size="large"
          :color="activity.tagName==='已签收'?'green':'gray'"
          :timestamp="activity.createdAt">
          {{activity.content}}
        </el-timeline-item>
      </el-timeline>
    </div>


  </div>
</template>

<script>
export default {
  name: 'OrderExpress',
  watch:{
    $route:function () {
      let $this=this
      $this.orderExpress.id=0
      setTimeout(function () {
        $this.getDetail()
      },500)
    }
  },
  data:function () {
    return {
      "orderExpress":{
        "id": 4,
        "orderId": 1,
        "expressNumber": "6649126331411",
        "expressCompany": "天天快递",
        "type": 2,
        "content": [{"createdAt":"2022-02-20 03:51:22","tagName":"已签收","content":"【西安市】已离开 西北转运交付中心；发往 陕西西安长安区五校公司"}],
        "isActive": 1,
        "updatedTime": "2022-02-20 03:51:22",
        "createdAt": "2022-02-20 03:51:22"
      },
      allTypeExpressList:{},
      activities:[{
        content: '支持使用图标',
        timestamp: '2018-04-12 20:46',
        color: '#c21414',
        // icon: 'el-icon-success'
      }, {
        content: '支持自定义颜色',
        timestamp: '2018-04-03 20:46',
      }, {
        content: '支持自定义尺寸支持自定义尺寸支持自定义尺寸支持自定义尺寸支持自定义尺寸',
        timestamp: '2018-04-03 20:46',
      }, {
        content: '开始配送',
        timestamp: '2018-04-03 20:46'
      }]
    }
  },
  mounted () {
    this.getDetail()
  },
  methods:{
    getMoreNums:function () {
      return Object.keys(this.allTypeExpressList).length
    },
    getDetail: function () {
      let $this = this
      let form = {
        id: $this.$route.query.id,
      }
      if ($this.$route.query.expressId){
        form.expressId=$this.$route.query.expressId
      }
      $this.MyRequest($this.ApiDoNameShop + 'Order/getExpressDetail', form, function (data) {
        data.orderExpress.content=data.orderExpress.content.reverse()
        $this.orderExpress = data.orderExpress
        $this.allTypeExpressList = data.allTypeExpressList
        console.log('$this.allTypeExpressList',$this.allTypeExpressList)
        $this.$forceUpdate()
      }, function (msg) {
        $this.$message.error(msg)
      })
    },
    getCurrStyle:function () {
      var winSize=this.getWinSize()
      return {
        width:winSize.width+'px',
        height:(winSize.height-40)+'px',
      }
    },
    GetMore:function () {
      let $this=this
      this.bus.$emit('OrderExpressMoreDialogCallBus',this.orderExpress,this.allTypeExpressList,function (orderExpress) {
        $this.$router.push({
          name:'OrderExpress',
          query:{
            id:orderExpress.id,
            time:(new Date()).getTime(),
          },
        })
      })
    }
  }
}
</script>

<style scoped>

</style>
